
import { v4 as uuidv4 } from 'uuid'
export default {
  data() {
    const _this = this
    return {
      windowSize: [0, 0],
      chartId: `echart-bar-${uuidv4()}`,		// 用UUID生成图表id，防止id重复
      chart: { map: null, chartData: [] },
      chartColors: ['#4288F0', '#12B9A3', '#FEB81D'], // 蓝色，绿色，黄色
      echartOption: {
        title: {
          text: '当月产品渠道销售值',
          show: false
        },
        color: _this.chartColors,
        tooltip: {
          trigger: 'axis',
          textStyle: {
            color: '#333333',
            fontFamily: 'PFZH',
            fontSize: 12,
            lineHeight: 26
          },
          axisPointer: {
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          extraCssText: 'z-index: 9' // 设置层级
        },
        legend: {
          data: [],
          show: false,
          align: 'left',
          left: 0,
          top: 0,
          padding: [0, 5, 0, 0],
          lineStyle: {
            opacity: 0
          },
          textStyle: {
            color: '#888888'
            // fontWeight: 'bold'
          }
        },
        grid: {
          left: '5',
          right: '5',
          bottom: '5',
          top: '20',
          containLabel: true,
          show: false
        },
        toolbox: {
          show: false,
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false // x轴刻度隐藏
          },
          axisLabel: { // 坐标轴字体颜色
            color: '#CCCCCC'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: { // 坐标轴字体颜色
            color: '#CCCCCC'
          }
        },
        series: [{
          data: [],
          type: 'bar',
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: function(params) {
                const colorlist = _this.chartColors
                return colorlist[params.dataIndex]
              },
              label: {
                show: true,
                position: 'top',
                textStyle: {
                  fontWeight: 'bolder',
                  fontSize: '12',
                  fontFamily: 'PFZH'
                }
              }

            }
          }
        }]
      }
    }
  },
  watch: {
    windowSize() {
      this.chart.map.resize()
    }
  },
  created() {
    if (this.chartColors && this.chartColors.length) {
      this.$set(this.echartOption, 'color', this.chartColors)
    }
    if (this.legendData && this.legendData.length) {
      this.$set(this.echartOption.legend, 'data', this.legendData)
    }
  },
  mounted() {
    this.initChart()
    this.$nextTick(() => {
      this.drawChart()
      setTimeout(() => {
        this.chart.map.resize()
      }, 200)
    })
  },
  methods: {
    initChart() {
      this.windowSize = [document.body.clientWidth, document.body.clientHeight]
      window.addEventListener('resize', () => {
        this.windowSize = [document.body.clientWidth, document.body.clientHeight]
      })
      this.chart.map = this.$echarts.init(document.getElementById(this.chartId))
    },
    async drawChart() {
      if (this.chart.map) {
        this.chart.map.dispatchAction({
          type: 'hideTip'
        })
      }
      this.chart.map.showLoading({
        color: '#12B9A3',
        fontFamily: 'PFZH',
        textColor: '#CCCCCC',
        fontSize: 14,
        lineWidth: 2
      })		// loading样式
      await this.getChartData()
      const chartData = this.chart.chartData
      // 模拟延迟加载数据
      const option = this.echartOption // JSON.parse(JSON.stringify(this.echartOption))
      // 设置月份
      option.xAxis.data = chartData.xAxisData || [] // X轴数据
      // 设置数据
      for (const i in chartData.seriesData) {
        option.series[i].data = chartData.seriesData[i]
      }
      this.chart.map.clear()
      this.chart.map.hideLoading()			// 隐藏loading样式
      this.chart.map.setOption(option)
      this.$nextTick(() => {
        setTimeout(() => {
          this.chart.map.resize()
        }, 300)
      })

      // 高亮时触发
      this.chart.map.on('highlight', (params) => {
        if (params && params.batch && params.batch.length) {
          const batchItem = params.batch[0]
          const xIndex = batchItem.dataIndex
          this.getxAxisSelectData && this.getxAxisSelectData(xIndex)
        }
      })
    }
  }
}
